<template>
  <div class="login">
    <!-- <Header title='哈哈' color="red" :isBack="false"/> -->
    <Header />
    <div class="title">登 录</div>

    <van-form class="login-form">
      <van-field v-model="username" placeholder="请输入手机号">
        <template #button>
          <span> 发送验证码 </span>
          <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
        </template>
      </van-field>
      <van-field v-model="username" placeholder="请输入验证码"> </van-field>
    </van-form>

    <div class="bottom">
        <p>
          <van-radio name="1" v-model="radio">我已阅读</van-radio>并同意
          <span class="book">《某某数字藏品服务协议》</span>
        </p>

      <div style="margin: 16px;">
        <van-button block type="info" @click="btnlogin">验证登录</van-button>
      </div>
     </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: "login",
  data() {
    return {
      radio: "",
      username: "",
      password: ""
    };
  },
  methods: {
    btnlogin() {
      this.$http.get(this.$api.login,'').then(res=>{
        console.log(res)
      })
      this.$http.post(this.$api.login,{aaa: 111}).then(res=>{
        console.log(res)
      })
      this.$router.push({ path:'/tabbar/home'})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>
.login {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  .title {
    text-align: center;
    line-height: 1;
    padding: 80px 0 60px 0;
    color: #7b6fe1;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
  .login-form {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .bottom {
    padding-top: 80px;
    text-align: center;
    width: 100%;
    height: 160px;
    p {
        font-size: 13.2px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
    }
    .book {
      color: #7B6FE1;
    }
    .van-button--info {
      background: linear-gradient(270deg, #E091A9 0%, #9A7FCF 100%);
      border-radius: 10px;
      border: none
    }
  }
.bottom .van-radio {
  display: inline;
}
.bottom .van-radio__icon {
  display: inline-block;
  vertical-align: middle;
}
.bottom .van-icon {
  width: 20px;
  height: 20px;
}
.bottom .van-radio__icon--checked .van-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #7b6fe1;
  border: none;
}
.bottom .van-icon-success:before {
  font-size: 13.5px;
}
}
</style>
<style>
.login-form .van-cell {
  padding: 0;
  margin-bottom: 20px;
  height: 40px;
  line-height: 40px;
  background: rgba(207, 206, 209, 0.41);
  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;
}
.login-form .van-cell .van-field__button {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7b6fe1;
}

</style>
